<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="icon" type="image/svg+xml" href="../img/logo.svg">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/chat.css" />
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
  <title>聊天</title>
</head>

<body>
  <div id="logo"> <a href="./index.html"> <img src="../img/logo.png" alt=""> </a> </div>


  <div class="wrap" id="app" v-cloak>
    <!-- 头部 Header 区域 -->
    <div class="header">
      <h3>{{other.nickName}}</h3>
      <img :src="other.img" class="avatar" alt="icon" />
    </div>
    <!-- 中间 聊天内容区域 -->
    <div class="main" id="main">
      <ul class="talk_list" style="top: 0px;" id="talk_list">
        <li class="left_word">
        </li>

      </ul>
      <div class="drag_bar" style="display: none">
        <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px"></div>
      </div>
    </div>



    
    <!-- 底部 消息编辑区域 -->
    <div class="footer">
      <el-badge :value="num_message" :max="99" class="item" style="float: left;" :hidden="num_message==0" >
      <a @click="myMessage = true"><img src="../img/logo.svg" width="37px" alt="icon" /></a>
    </el-badge>
      <input v-model="send_message" @keyup.enter="send" type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />
      <input @click="send" type="button" value="发 送" class="input_sub" id="btnSend" />
    </div>



            <!-- 消息列表 -->
            <el-drawer title="我的消息" :visible.sync="myMessage" :direction="direction" size="20%" append-to-body>
            

              <div @click="goChat(user.userId,user.nickName,user.img)" v-for="user in onlineUsers">
                <el-badge :value="user.num_unread_messages" style="width: 100%;" :hidden="user.num_unread_messages==0"id="message-list">
                  <el-row  :gutter="80" class="message" style="margin-left: 0;"  >
                      <el-col :span="2">
                          <el-avatar :size="50" :src="user.img"></el-avatar>
                      </el-col>
      
                      <el-col :span="12">
                          <span>{{user.nickName}}</span>
                      </el-col>
                  </el-row>

                </el-badge>
              </div>
  
  
          </el-drawer>


  </div>



</body>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="../js/chat.js"></script>

</html>